<script setup lang="ts">
import { IconPath, PagePath } from '@/common/constants'

withDefaults(
  defineProps<{
    avatarUrl: string
    nickname: string
    points: number
  }>(),
  {
    avatarUrl: IconPath.DEFAULT_AVATAR_URL,
    nickname: '',
    points: 0,
  },
)
</script>

<template>
  <!-- 用户卡片组件 -->
  <view class="user-card">
    <view class="user-card-top" @click="() => goToPage(PagePath.SETTING)">
      <view class="user-card-top-left">
        <image :src="avatarUrl" mode="scaleToFill" class="user-card-avatar" />
        <view class="user-card-info">
          <view class="user-card-info-name">
            <text class="user-card-info-name-text">
              {{ nickname }}
            </text>
            <image class="user-card-info-edit" :src="IconPath.EDIT_LIGHT" mode="scaleToFill" />
          </view>
          <text class="user-card-info-level">
            积分{{ points }}
          </text>
        </view>
      </view>
      <image
        :src="IconPath.SET_LIGHT" mode="scaleToFill" class="user-card-set"
        @click="() => goToPage(PagePath.SETTING)"
      />
    </view>
    <view class="user-card-message" @click="() => goToPage(PagePath.NOTIFICATION)">
      <image class="user-card-message-icon" :src="IconPath.NOTIFICATION" mode="scaleToFill" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.user-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  /* background-color: $color-primary; */
  background: radial-gradient(circle at 1% 119%, $color-white 30%, $color-primary 30%, $color-primary);
  height: 280rpx;
  border-radius: $border-radius-base;

  box-shadow: $shadow-raised-2;

  &-brief {
    color: $color-white;
    font-size: $font-size-lg;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid $color-white;
  }

  &-top {
    display: flex;
    justify-content: space-between;

    &-left {
      display: flex;
      margin-left: 60rpx;
      gap: 30rpx;
    }
  }

  &-bottom {
    display: flex;
    align-items: center;
    justify-content: center
  }

  &-avatar {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    background-color: $color-primary;
    border: 4rpx solid $color-white;
    transform: translateY(-45%)
  }

  &-info {
    &-edit {
      width: 40rpx;
      height: 40rpx;
    }

    &-name {
      display: flex;

      &-text {
        color: $color-white;
        font-size: $font-size-lg;
        margin-right: 6rpx;
      }
    }

    &-level {
      color: $color-primary;
      font-size: $font-size-sm;
      padding: 2rpx 16rpx;
      background-color: $color-white;
      text-align: center;
      border-radius: 200rpx;
    }
  }

  &-set {
    width: 60rpx;
    height: 60rpx;
  }

  &-message {
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
    background-color: $color-white;
    border-radius: 50%;

    &-icon {
      width: 50%;
      height: 50%;
    }
  }

}
</style>
